<docs>
  ## 灵活保险补贴预约第一步
</docs>
<template>
  <div>
    <mheader type="index" @back_btn="goBack()" title="信息变更服务"></mheader>
    <!-- 选择地区开始 -->
    <div class="choice">
      <co-form :model="data" :rules="rules" ref="form">
        <co-select prop="zmxyt" label="居住地址" v-model="data.lhjygz"
        :list="jygzList"></co-select>
        <co-input prop="xxdz" label="详细地址" max-length="100"
        v-model="data.xxdz" placeholder="请输入"></co-input>
        <co-input prop="jzdyb" label="居住地邮编" max-length="100"
        v-model="data.jzdyb" placeholder="请输入"></co-input>

        <co-input prop="ylsjhm" label="预留手机号码" max-length="100"
        v-model="data.ylsjhm" placeholder="请输入"></co-input>
      </co-form>
    </div>
    <!-- 选择地区结束 -->
    <!-- 下一步 开始 -->
    <div class="next-step">
      <button class="btn btn-primary" @click="nextStep">确定</button>
    </div>
    <!-- 下一步 结束 -->
    <!-- 申请成功或失败提示 -->
    <message-card :visible.sync="save.visible"
    :title="save.title" :btn-text="save.btnText"
    :btn-type="save.btnType" @btnClick="msgBtn" @iconCloseClick="iconCloseClick"
    :type="save.type ? 'success' : 'fail'">
      <div class="msg-success" v-if="save.type">
        <p class="title">{{msgTitle}}</p>
        <!-- <ul class="detail">
          <li v-for="(item, index) in msgList"
          :key="index">{{index+1}}、{{item.dmmc}}</li>
        </ul> -->
      </div>
      <div class="msg-fail" v-else>
        <p class="title">{{msgTitle}}</p>
      </div>
    </message-card>
  </div>
</template>
<script>
import Mheader from '@/txry/group/mheader/mheader';
import coForm from '@/base/form/form';
import coInput from '@/base/form/input';
import coSelect from '@/base/form/select';
import $ from 'common/js/axios';
import { validator } from 'common/js/valid';
import { mixinValid } from 'common/mixins/mixins';
import MessageCard from '@/txry/group/messageCard/messageCard';

export default {
  components: { coForm, MessageCard, coInput, coSelect, Mheader },
  name: 'reverseOne',
  mixins: [mixinValid],
  data() {
    return {
      data: {
        lhjygz: '',
        gznr: '',
        xxdz: '',
        ysr: ''
      },
      rules: {
        zmxyt: validator('7,"full","证明信用途",false'),
        kwjg: validator('100,"full","开往机构",false'),
        kwjgdwxz: validator('128,"full","开往机构单位性质",false'),
        ysr: validator('10,"posdouble","月收入",false')
      },
      save: {
        type: '',
        btnText: '',
        btnType: '',
        title: '',
        visible: false
      },
      msgTitle: '',
      jygzList: []
    };
  },
  methods: {
    goBack(){
      this.$router.go(-1);
    },
    // 查询就业工种
    GET_jygzCx() {
      // $.get('/lhsq/lhgzCx').then((res) => {
      //   this.jygzList = res.returnData.lhgz;
      // });
    },
    // 下一步操作
    nextStep() {
      this.$router.go(-1)
      // this.$router.push({ name: 'reverseTwo', query: { jygz: this.data.jygz, gznr: this.data.gznr, gzxxdz: this.data.gzxxdz, ysr: this.data.ysr } });
      // this.$refs.form.validate(() => {
      // this.POST_reverse();
      // });
    },
    // 保存接口
    POST_reverse() {
      this.$router.push({ name: 'index' });
      // $.post('/lhsq/sqBc', this.data).then((res) => {
      //   const data = res.returnData;
      //   if (parseInt(data.executeResult, 10) === 1) {
      //     this.save = {
      //       type: true,
      //       btnText: '知道了',
      //       btnType: 'gray',
      //       title: '申请成功！',
      //       visible: true
      //     };
      //     // this.msgList = data.xdcl;
      //     this.msgTitle = data.title;
      //   } else {
      //     this.save = {
      //       type: false,
      //       btnText: '重新选择',
      //       btnType: 'primary',
      //       title: '申请失败！',
      //       visible: true
      //     };
      //     this.msgTitle = data.message;
      //   }
      // }).catch(() => {});
    },
    // 返回消息按钮点击处理
    msgBtn() {
      // 成功
      if (this.save.type) {
        this.$router.push({ name: 'index' });
      }
    },
    // 点击×返回到首页
    iconCloseClick() {
      if (this.save.type) {
        this.$router.push({ name: 'index' });
      }
    }
  },
  created() {
    this.GET_jygzCx();
  }
};
</script>
<style lang="scss" scoped>
  @import '~common/scss/variable.scss';
  .choice {
    border: $border;
    padding-left: $padding-base;
    background-color: #fff;
    margin-top: $margin-base;
    border: $border;
  }
  .next-step {
    margin-top: $margin-base * 5;
    width: 100%;
    box-sizing: border-box;
    padding: $padding-base;
    .btn {
      width: 100%;
    }
  }
</style>
